<template>
	<view class="goods-manage">
		<NavBar title="商品管理" right="search" @rightTap="searchGoods"/>
		<view class="content" v-if="goodsList.length">
			<GoodsManageItem :goodsInfo="item" v-for="(item, index) in goodsList" :key="item" @del="delGoods(index)"/>
		</view>
		<Empty txt="暂未添加商品~" v-else />
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import Empty from '@/components/Empty.vue';
	import GoodsManageItem from './components/GoodsManageItem.vue';
	import { GetGoodsListApi } from '@/service/shop.js'
	import { useUserStore } from '@/store/index.js'
	const page = ref(1)
	const page_size = ref(15)
	const total = ref()
	const search = ref('')
	const goodsList = ref([])
	const getGoodsList = () => {
		const { userInfo } = useUserStore()
		let params = {
			page: page.value,
			page_size: page_size.value,
			filters: {
				goods_type: 1, //固定传参 
				search: search.value, //搜索关键字 
				shop_id: userInfo.shop_id, //店铺ID 传商家ID表示获得该商家商品 
				status: 'checked' //固定传参
			}
		}
		GetGoodsListApi(params).then(res => {
			total.value = res.total
			goodsList.value.push(...res.data)
		})
	}
	const delGoods = (i) => {
		goodsList.value.splice(i, 1)
	}
	const searchGoods = () => {
		console.log('search');
	}
	onShow(() => {
		page.value = 1
		goodsList.value = []
		getGoodsList()
	})
	onReachBottom(() => {
		if(page.value*page_size.value>=total.value) return
		page.value = page.value + 1
		getGoodsList()
	})
</script>

<style scoped lang="scss">
.goods-manage {
	.content {
		padding: 10px 12px;
	}
}
</style>
